<template>
  <div>
    <div style="text-align: left; height: 30px; line-height: 30px">
      <img
        :src="require('@/assets/img/icon/logn.png')"
        style="height: 20px; position: relative; top: 5px; left: 3px"
      />
      <b style="margin-left: 10px">官网直邮　正品保障></b>
    </div>
    <div style="display: flex">
      <van-search
        v-model="value"
        shape="round"
        style="width: 80vw"
        placeholder="LV"
      />
      <div>
        <img
          :src="require('@/assets/img/tubiao/xiaoxi.png')"
          style="height: 30px; position: relative; top: 10px; left: 35px"
        />
      </div>
    </div>
    <div
      style="
        text-align: left;
        margin-left: 10px;
        color: #aaa;
        font-size: 12px;
        height: 30px;
        line-height: 30px;
      "
    >
      热搜:<van-button
        type="default"
        round
        style="
          height: 20px;
          color: #aaa;
          font-size: 12px;
          position: relative;
          top: -4px;
          left: 5px;
          padding: 5px;
        "
        v-for="item in data.hotsecrh"
        :key="item.id"
        >{{ item.name }}</van-button
      >
    </div>
    <div style="display: flex; height: 30px">
      <div style="width: 80vw">
        <van-tabs v-model:active="active" swipeable="true">
          <van-tab
            v-for="index in data.title"
            :title="index.title"
            :to="index.url"
          >
              
          </van-tab>
        </van-tabs>
      </div>
      <div style="height: 30px;font-size:14px;margin-top:-4px;">
        <img
          :src="require('@/assets/img/tubiao/fenlei.png')"
          style="height: 30px; position: relative; top: 9px; left: 5px"
        />
        分类
      </div>
    </div>
    <router-view />
  </div>
</template>
<script setup>
import { reactive } from "vue";
const data = reactive({
  hotsecrh: [
    {
      id: 1,
      name: "CK",
    },
    {
      id: 2,
      name: "MK",
    },
    {
      id: 3,
      name: "拉夫劳伦",
    },
    {
      id: 4,
      name: "CK卫衣",
    },
    {
      id: 5,
      name: "essentials",
    },
  ],
  title: [
    {
      id: 1,
      url: "zx",
      title: "最新",
    },
    {
      id: 2,
      url: "sp",
      title: "奢品",
    },
    {
      id: 3,
      url: "ss",
      title: "时尚",
    },
    {
      id: 4,
      url: "hw",
      title: "户外",
    },
    {
      id: 5,
      url: "cp",
      title: "潮牌",
    },
    {
      id: 6,
      url: "mz",
      title: "美妆",
    },
    {
      id: 7,
      url: "man",
      title: "男士",
    },
    {
      id: 8,
      url: "my",
      title: "母婴",
    },
    {
      id: 9,
      url: "jk",
      title: "健康",
    },
    {
      id: 10,
      url: "pzsh",
      title: "品质生活",
    },
  ],
});
</script>
<style lang="scss" scoped></style>
